<!--  说明：
    input：value必填
    select：value、label、options必填
    datePicker：value必填
-->
<template>
    <div class="box">
        <div v-if="!edit" class="text" @click="editHandle">
            <div v-if="type == 'text' && value && value.length">
                <div>{{ value }}</div>
            </div>
            <div v-else-if="type == 'number' && value && value.length">
                <div>{{ value }}</div>
            </div>
            <div v-else-if="type == 'select' && label && label.length">
                <div>{{ label }}</div>
            </div>
            <div v-else-if="type == 'datePicker' && value && value.length">
                <div>{{ value }}</div>
            </div>
            <div v-else class="null-tip">点击编辑</div>
            <i class="el-icon-edit edit-icon" />
        </div>
        <div v-else class="value-edit">
            <!-- input text-->
            <el-input
                v-if="type == 'text'"
                ref="autoFocus"
                v-model="newValue"
                type="text"
                clearable
                placeholder="请输入"
                @keyup.enter.native="$event.target.blur()"
                @blur="valChange"
            />
            <!-- input number-->
            <el-input
                v-if="type == 'number'"
                ref="autoFocus"
                v-model="newValue"
                type="number"
                placeholder="请输入"
                @keyup.enter.native="$event.target.blur()"
                @blur="valChange"
            />
            <!-- select -->
            <el-select
                v-if="type == 'select'"
                ref="autoFocus"
                v-model="newValue"
                :automatic-dropdown="edit"
                clearable
                placeholder="请选择"
                @blur="selectBlur"
                @change="valChange"
            >
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
            <!-- datePicker -->
            <el-date-picker
                v-if="type == 'datePicker'"
                ref="autoFocus"
                v-model="newValue"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :automatic-dropdown="edit"
                type="date"
                clearable
                placeholder="选择日期"
                @blur="selectBlur"
                @change="valChange"
            ></el-date-picker>
            <!-- cascader -->
            <el-cascader
                v-if="type == 'cascader'"
                ref="autoFocus"
                v-model="newValue"
                :automatic-dropdown="edit"
                :options="options"
                clearable
                placeholder="请选择"
                @blur="selectBlur"
                @change="cascaderChange"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: "PageHeader",
    props: {
        type: {
            type: String,
            default: () => "text",
            required: true
        },
        value: {
            type: String,
            default: () => "",
            required: true
        },
        label: {
            type: String,
            default: () => "",
            required: false
        },
        selects: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            newValue: "",
            options: [],
            edit: false
        };
    },
    watch: {
        value: {
            handler: function(val) {
                this.newValue = val;
            },
            immediate: true
        },
        selects: {
            handler: function(val) {
                this.options = val;
            },
            immediate: true
        }
    },
    methods: {
        editHandle() {
            this.edit = true;
            setTimeout(() => {
                this.$refs.autoFocus.focus();
            }, 100);
        },
        selectBlur() {
            setTimeout(() => {
                this.edit = false;
            }, 300);
        },
        valChange(e) {
            let label = null;
            if (this.type == "select") {
                this.options.map(item => {
                    if (item.id == e) label = item.name;
                });
            }
            this.$emit("change", { label: label, value: this.newValue });
            this.edit = false;
        },
        cascaderChange(e) {
            console.log(e);
        }
    }
};
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    cursor: pointer;
    .text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .edit-icon {
            display: none;
            color: $g-sub-sidebar-menu-active-color;
        }
        &:hover .edit-icon {
            display: block;
        }
        .null-tip {
            color: #bbb;
        }
    }
    .value-edit {
        ::v-deep .el-input__inner {
            width: 100%;
            border: none;
            height: 38px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            font-size: 12px;
        }
        ::v-deep .el-select {
            width: 100%;
        }
    }
}
</style>
